﻿@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/city-picker.css" rel="stylesheet" />
<div class="mainCont">
    <table class="table table-bordered">
        <tr>
            <td width="100px">
                人员
            </td>
            <td>
                张三
            </td>
        </tr>
        <tr>
            <td>
                已有地点
            </td>
            <td>
                <div style="float:left;margin-left:5px;position:relative;width:60px;">
                    南京
                    <div style="position:absolute;top:0;right:0;font-size:10px;">x</div>
                </div>
                <div style="float:left;margin-left:5px;position:relative;width:60px;">
                    北京
                    <div style="position:absolute;top:0;right:0;font-size:10px;">x</div>
                </div>
                
            </td>
        </tr>
        <tr>
            <td>可添加地点</td>
            <td>
                @* <input readonly onclick="$('.cityContent').css('display', 'block')" id="ipt_cityname" placeholder="点击从下拉面板中选择省份" style="padding-top:10px" />*@
                <input type="hidden" id="ProvinceId" value="0" />
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#province" role="tab" data-toggle="tab">省份</a></li>
                    <li role="presentation"><a href="#district" role="tab" data-toggle="tab">地级市</a></li>

                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="cityContent tab-pane active" id="province" style="margin-left:0px;">
                        <ul class="nav nav-pills" role="tablist">
                            <li>
                                <a href="#none" data-value="51801">北京</a>
                            </li>
                            <li>
                                <a href="#none" data-value="51802">北京1</a>
                            </li>
                            <li>
                                <a href="#none" data-value="51803">北京2</a>
                            </li>
                            <li>
                                <a href="#none" data-value="51804">北京3</a>
                            </li>
                            <li>
                                <a href="#none" data-value="51805">北京4</a>
                            </li>
                        </ul>
                        @*<button type="button" class="btn btn-primary" id="btnCitySelect" style="margin-left:150px">确认</button>*@
                    </div>
                    <div role="tabpanel" class="tab-pane" id="district">
                        <div id="district_content">
                            <ul></ul>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <button type="button" class="btn btn-primary">保存</button>
</div>


<style type="text/css">
    .mainCont {
        position: absolute;
        left: 220px;
        right: 0;
        top: 100px;
        /*padding-right: 20px;*/
        min-width: 940px;
        overflow: hidden;
        padding: 0 100px;
    }

    .cityContent ul {
        list-style: none;
        width: 250px;
        margin-top: 10px;
    }

    .cityContent li {
        display: inline-block;
        /*margin-right: 15px;*/
        width: 70px;
    }

    .cityContent ul li a {
        color: #005aa0;
        text-decoration: none;
    }

    .cityContent li a:hover {
        background: #005aa0;
        color: #fff;
    }

    .cityContent li a.active {
        background: #005aa0;
        color: #fff;
    }

    #ipt_cityname {
        border: none;
    }

    .delbtn {
        float: left;
        margin-left: 5px;
        z-index: 100;
        border-style: solid;
        border-width: 1px;
        border-color: #FF0000;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        background-color: #ffffff;
        line-height: 10px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        font-size: 10px;
        color: red;
        display: none;
    }
</style>

<script>
    $().ready(function () {
        $(".cityContent li a").click(function () {
            $(".cityContent li a").removeClass("active");
            $(this).addClass("active");
            $.ajax({
                url: "../api/Promoter/GetDistrict",
                data: { provinceID: $(".cityContent li a.active").data("value") },
                success: function (data) {
                    $("#district_content ul").html("");
                    for (var i = 0; i < data.length; i++) {
                        $("#district_content ul").append("<li> <a href='#none' data-value=" + data[i].code + ">" + data[i].address + "</a></li>");
                    }
                    $('a[href="#district"]').tab('show');
                }
            });
        })
        //$("#btnCitySelect").click(function () {
        //    $('.cityContent').css('display', 'none');
        //    if ($(".cityContent li a.active").text() != "") {
        //        $("#ipt_cityname").attr("placeholder", $(".cityContent li a.active").text());
        //        $("ProvinceId").val($(".cityContent li a.active").data("value"));
        //    } else {
        //        $("#ipt_cityname").attr("placeholder", "点击从下拉面板中选择省份");
        //        $("ProvinceId").val(0);
        //    }
        //})
        //$('#myTab a').click(function (e) {
        //    e.preventDefault()
        //    $(this).tab('show')
        //})
    })

</script>